<template>
    <div
        id="channel"
        class="chart"
    />
</template>
<script>
export default {
    props: {
        qudaoData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            myChart: null
        }
    },
    watch: {
        qudaoData: {
            handler() {
                this.$nextTick(() => {
                    this.drawLine()
                })
            },
            deep: true
        }
    },
    mounted() {
        this.drawLine()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.changeSize, true)
    },
    methods: {

        drawLine() {
            if (this.myChart) {
                this.myChart.clear()
                this.$echarts.dispose(this.myChart)
            }
            let optionData = JSON.parse(JSON.stringify(this.qudaoData))
            let xData = []
            let oneStar = []
            let twoStar = []
            let threeStar = []
            let fourStar = []
            optionData.map(item => {
                xData.push(item.name) 
                item.list.forEach((element, index) => {
                    if (index == 0) {
                        oneStar.push(element.total)
                    }
                    if (index == 1) {
                        twoStar.push(element.total)
                    }
                    if (index == 2) {
                        threeStar.push(element.total)
                    }
                    if (index == 3) {
                        fourStar.push(element.total)
                    }
                });
            })
            let option = {
                grid: {
                    left: "1%",
                    right: "1%",
                    bottom: "10%",
                    top: "1%",
                    containLabel: true
                },
                legend: {
                    /* "x": "right",*/
                    bottom: 0,
                    "textStyle": {
                        "color": "#999",
                        "fontSize": 14
                    },
                    "itemWidth": 20,
                    "itemHeight": 10,
                    "itemGap": 20,
                    formatter: function(name) {
                        return name.length > 4 ? name.substr(0, 4) + "..." : name;
                    }
                },
                "color": [
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(251, 210, 65, 1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(251, 210, 65, 1)'
                            }
                        ]
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgb(253, 126, 120)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(253, 126, 120)'
                            }
                        ]
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#5cbafb'
                            },
                            {
                                offset: 1,
                                color: '#5cbafb'
                            }
                        ]
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#b27f2e'
                            },
                            {
                                offset: 1,
                                color: '#b27f2e'
                            }
                        ]
                    }
                ],
                "tooltip": {
                    "trigger": "axis",
                    "axisPointer": {
                        "type": "shadow"
                    },
                    textStyle: {
                        color: "#999"
                    },
                    backgroundColor: "#fff",
                    borderColor: "rgba(255, 255, 255, 0.8)"

                },
                xAxis: {
                    data: xData,
                    axisLabel: {
                        color: "#A9AEB2", // 单位值的颜色
                        rotate: '70'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#A9AEB2'// 轴线和单位颜色
                        }
                    },
                    axisTick: {// 刻度颜色
                        show: false,
                        lineStyle: {
                            color: '#A9AEB2'
                        }
                    }
                },
                yAxis: {
                    show: true,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#A9AEB2'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }

                },
                series: [
                    {
                        name: "1星：有条件了解为主",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: false,
                            color: "#FFFFFF",
                            formatter: function(e) {
                                // return e.value ? e.value : "";
                                // return e.value ? e.seriesName : "";
                            }
                        },
                        itemStyle: {
                            borderRadius: [5, 5, 0, 0]
                        },
                        barWidth: 20,
                        emphasis: {
                            focus: "series"
                        },
                        data: threeStar
                    },
                    {
                        name: "2星：有需求但不着急",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: false,
                            color: "#FFFFFF",
                            formatter: "{a}"
                        },
                        emphasis: {
                            focus: "series"
                        },
                        itemStyle: {
                            borderRadius: [5, 5, 0, 0]
                        },
                        data: oneStar
                    },
                    {
                        name: "3星：近两个月有需求",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: false,
                            color: "#FFFFFF",
                            formatter: "{a}"
                        },
                        itemStyle: {
                            borderRadius: [5, 5, 0, 0]
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: twoStar
                    },
                    {
                        name: "4星：需求明确的那个月就要办好",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: false,
                            color: "#FFFFFF",
                            formatter: "{a}"
                        },
                        itemStyle: {
                            borderRadius: [5, 5, 0, 0]
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: fourStar
                    }
                ]
            }

            this.myChart = this.$echarts.init(document.getElementById('channel'))
            // 绘制图表
            this.myChart.setOption(option)
            window.addEventListener('resize', this.changeSize, true)
        },
        changeSize() {
            this.myChart.resize()
        }
    }
}
</script>

<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 100%;
}
</style>
